<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../assets/flexible/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../assets/swiper/css/" />
    <!-- <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css"/> -->
    <link rel="stylesheet" type="text/css" href="../css/shopp.css" />
</head>

<body>
    <!-- 顶部搜索框 -->
    <div class="search">
        <a href="#">
            <img src="../images/search.png">
        </a>
    </div>

    <style type="text/css">
        /*.curr{
				overflow: hidden; 		   溢出隐藏
				text-overflow: ellipsis; 超出变省略号
				white-space: nowrap;	   强制不换行
			}*/
    </style>

    
    <main class="main">
        
        <section class="table">
            <article class="sidebar">
                <ul class="nav">

                </ul>
            </article>
            <div id="box_one">
                <section class="section">
                    <ul class="nv-fz">

                    </ul>
                </section>
                <section class="section">
                    <ul class="nv-xb">

                    </ul>
                </section>
                <section class="section">
                    <ul class="nan-fz">

                    </ul>
                </section>

                <section class="section">
                    <ul class="nv-xb">

                    </ul>
                </section>
                <section class="section">
                    <ul class="nan-fz">

                    </ul>
                </section>
                <section class="section">
                    <ul class="nan-fz">

                    </ul>
                </section>
                <section class="section">
                    <ul class="nan-fz">

                    </ul>
                </section>
                <section class="section">
                    <ul class="nan-fz">

                    </ul>
                </section>
            </div>
        </section>

    </main>
    <!-- 底部导航 -->
	<footer class="footer">
		<a href="../index.html">
			<dl>
				<dt>
					<img src="../images/home_before.png">
				</dt>
				<dd>
					推荐
				</dd>
			</dl>
		</a>
		<a href="#">
			<dl class="on">
				<dt>
					<img src="../images/class_after.png">
				</dt>
				<dd>
					逛
				</dd>
			</dl>
		</a>

		<a href="../html/car.html">
			<dl>
				<dt>
					<img src="../images/shopcar_before.png">
				</dt>
				<dd>
					购物车
				</dd>
			</dl>
		</a>

		<a href="../html/my.html">
			<dl>
				<dt>
					<img src="../images/mine_before.png">
				</dt>
				<dd>
					我的
				</dd>
			</dl>
		</a>
	</footer>

    <script type="text/html" id="fenlei">
        {{each list value index}}
        <li><a href="{{value.aSrc}}"><img src="{{value.imgUrl}}"/></a><span>{{value.name}}</span></li>
        {{/each}}
    </script>
    <script type="text/html" id="nav">
        {{each list value index}}
        <li>{{value.name}}</li>
        {{/each}}
    </script>

    <script src="../assets/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/swiper/js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/artTemplate/template-web.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            $.ajax({
                type: "get",
                url: "../json/shopp.json",
                success: function (data) {
                    var str = template("nav", {
                        list: data
                    });
                    $(".nav").html(str);
                    var section = document.getElementsByClassName("section");
                    var class1 = $(".section");
                    $(".nav li:first-child").addClass("curr");
                    $('.nav').children().click(function () {
                        var index = $(this).index();
                        $('#box_one').children().eq(index).show(300).siblings().hide(300)
                    })
                    console.log(class1);
                    $(".nav li").click(function () {
                        $(this).addClass("curr").siblings().removeClass("curr");
                        console.log(this);
                    })
                }
            });


            $.ajax({
                type: "get",
                url: "../json/shopp.json",
                success: function (data) {
                    var str = template("fenlei", {
                        list: data
                    });
                    $(".nv-fz").html(str);
                }
            });
            $.ajax({
                type: "get",
                url: "../json/shopp.json",
                success: function (data) {
                    var str = template("fenlei", {
                        list: data
                    });
                    $(".nv-xb").html(str);
                }
            });
            $.ajax({
                type: "get",
                url: "../json/shopp.json",
                success: function (data) {
                    var str = template("fenlei", {
                        list: data
                    });
                    $(".nan-fz").html(str);
                }
            });

            $(".fot li").eq(1).css("color", "#ff6666");
            $(".fot li").click(function () {
                $(this).css("color", "#ff6666").siblings().css("color", "#969696");

            })
        })
    </script>
</body>

</html>